<template>
  <div class="getting-detail-content">
    <img class="vehicle-image" :src="kuaiImage" alt="">
    <h2>快车-普通型</h2>
    <div class="detail-title flex-middle-x layout-flex-align-items_center">
      <span></span>
      <p>实时用车</p>
      <span></span>
    </div>
    <div class="title-content flex-middle-x layout-flex-justify-content_space-between">
      <p>基础费</p>
      <p>14.00元 </p>
    </div>
    <div class="distance-content">
      <h3>里程费（分时段）</h3>
      <ul>
        <li class="flex-middle-x layout-flex-justify-content_space-between">
          <p>普通时段</p>
          <p>2.30/公里</p>
        </li>
        <li class="flex-middle-x layout-flex-justify-content_space-between">
          <p>00:00-05:00</p>
          <p>3.2/公里</p>
        </li>
        <li class="flex-middle-x layout-flex-justify-content_space-between">
          <p>22:00-00:00</p>
          <p>3.2/公里</p>
        </li>
      </ul>
    </div>
    <div class="distance-content">
      <h3>时长费（分时段）</h3>
      <ul>
        <li class="flex-middle-x layout-flex-justify-content_space-between">
          <p>普通时段</p>
          <p>0.60元/分钟</p>
        </li>
        <li class="flex-middle-x layout-flex-justify-content_space-between">
          <p>07:00-10:00</p>
          <p>0.70/分钟</p>
        </li>
        <li class="flex-middle-x layout-flex-justify-content_space-between">
          <p>17:00-20:00</p>
          <p>0.70/分钟</p>
        </li>
      </ul>
    </div>
    <div class="describe-content">
      <h4>顺路单折扣</h4>
      <p>单乘客被顺路司机接单时，顺路单将享受固定折扣，
      折扣仅抵扣基础费用，不含附加费用、感谢红包、远程调度费等。</p>
    </div>
    <div class="distance-content">
      <h3>远途费</h3>
      <ul>
        <li class="flex-middle-x layout-flex-justify-content_space-between">
          <p>超出20公里后，加收远途费</p>
          <p>0.80元/公里</p>
        </li>
      </ul>
    </div>
    <div class="describe-content">
      <h4>临时加价</h4>
      <p>当处于高峰时段，周围司机较少，或司机距离乘客较远时，为促进成交鼓励司机
      更快接单，平台会对订单适当加价。</p>
      <p>1、乘客加价金额全部给到司机</p>
      <p>2、乘客加价会封顶</p>
    </div>
    <div class="detail-title flex-middle-x layout-flex-align-items_center">
      <span></span>
      <p>预约用车</p>
      <span></span>
    </div>
    <h2>基础计价与实时用车计价保持一致</h2>
    <div class="title-content flex-middle-x layout-flex-justify-content_space-between">
      <p>基础费</p>
      <p>37.00元 </p>
    </div>
    <div class="describe-content">
      <p>注1：里程费、时长费合计不足基础费时，直接按基础旨计费</p>
      <p>注2：高速费、路桥费、停车费（停车费仅限司机在乘客上车点或按照乘客要求
        停车产生点费用）、其化费用按行驶过程中司机实际垫付的费用收取</p>
      <p>注3：选择现金/扫码支付时，以元为单位进行结算支付，元以下部分将四舍五入取整。
      如：8.5元支付9元，8.48元支付8元，现金/扫码支付仅适用于开通城市，发单时在个人支付中
      有现金/扫码支付选项的即为开通城市。</p>
    </div>
  </div>
</template>
<script>
  export default {
    name:'',
    data(){
      return {
        kuaiImage:require('./image/kuai-image.png')
      }
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped="">
  .getting-detail-content{
    width:400px;
    background:$color-4;
    text-align: center;
    margin:0 30px;
    box-shadow: 1px 1px 1px $color-3;
    padding:0 30px 20px 30px;
    font-size:18px;
    .vehicle-image{
      width:250px;
    }
    h2{
      padding:20px;
      font-size:18px;
    }
    .detail-title{
      width:180px;
      margin:auto;
      padding: 20px 0;
      span{
        width:50px;
        height:2px;
        background:#e6e6e6;
      }
      p{
        font-size:20px;
        color:$color-black;
      }
    }
    .title-content{
      padding-bottom:20px;
      border-bottom:1px solid #efefef;
    }
    .distance-content{
      padding-bottom:20px;
      h3{
        font-size:20px;
        text-align: left;
        padding-bottom:10px;
      }
      ul{
        li{
          padding:10px 0;
          p{
            font-size:16px;
            color:#bfbfbf;
          }
        }
      }
    }
    .describe-content{
      margin:10px 0;
      border-bottom:1px solid #f9f9f9;
      text-align: left;
      h4{
        font-size:20px;
        padding-bottom:10px;
      }
      p{
        font-size:16px;
        color:#bfbfbf;
      }
    }
  }
</style>
